<template>
  <view v-if="isShow" class="deco-tabbar">
    <zm-tabbar :value="currentRoute" route :height="useDecoUnit(tabbar.height)" :custom-style="{ 'box-shadow': '0rpx -1rpx 20rpx 1rpx rgba(0, 0, 0, 0.05)' }" @height="onHeight">
      <zm-tabbar-item
        v-for="(item, index) in tabbar.list"
        :key="index"
        :name="item.value"
        :route="jumpRoute(item.value)"
        :route-type="routeJumpType(item.value)"
        :icon="tabbarItemIcon(item.value)"
        :icon-size="tabbarItemIconSize(index)"
      >
        <text class="tabbar-text">{{ item.text }}</text>
      </zm-tabbar-item>
    </zm-tabbar>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
import routeDict from "@/dict/route"
import { mitt } from "@/utils/mitt"
import { mapGetters } from "vuex"
import { useDecoUnit } from "@/decoration/utils/style"
export default {
  name: "deco-tabbar",
  mixins: [mixin],
  data() {
    return {
      height: 0,
      useDecoUnit,
      currentRoute: ""
    }
  },
  computed: {
    isShow() {
      return this.tabbar?.list.some((item) => item.value === this.currentRoute)
    },
    routeJumpType() {
      return (value) => {
        return routeDict.find((item) => item.value === value)?.jumpType
      }
    },
    tabbarItemIcon() {
      return (value) => {
        const find = this.tabbar.list?.find((item) => item.value === value)
        return this.currentRoute === value ? find?.activeIcon : find?.inactiveIcon
      }
    },
    tabbarItemIconSize() {
      return (index) => {
        return this.isMidRaised(index) ? useDecoUnit(this.tabbar?.midIconSize) : useDecoUnit(this.tabbar?.iconSize)
      }
    },
    jumpRoute() {
      return (value) => {
        const find = routeDict.find((item) => item.value === value)
        return find ? find.route : ""
      }
    },
    ...mapGetters(["tabbar"])
  },
  mounted() {
    this.init()
    this.onEvents()
  },
  methods: {
    init() {
      const currentRoute = this.useCurrentRoute()
      const find = routeDict.find((item) => item.route === currentRoute)
      if (find) {
        this.currentRoute = find.value
      }
    },
    isMidRaised(index) {
      const contain = [3, 5, 7]
      const len = this.tabbar?.list.length
      if (contain.includes(len) && this.tabbar?.midRaised) {
        return index + 1 + 2 === len
      } else return false
    },
    onHeight(height) {
      this.height = height
      setTimeout(() => {
        mitt.emit("deco-tabbar.height", height)
      }, 300)
    },
    onEvents() {
      setTimeout(() => {
        mitt.on("deco-tabbar.this", (fn) => fn(this))
      }, 300)
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-tabbar {
  z-index: 1000;
  position: relative;
  .tabbar-text {
    font-size: 22rpx;
  }
}
</style>
